Screenshot-1

vX was an old project which aimed to do lots of nifty things in the least code possible (3KB without gzip!), but among its goals, developer friendliness wasn’t present. So now, I made a new library, this one is 5KB before gzip, and supports most of what vX does, but with DOM manipulation as well, in a jquery-like manner, and animations with queuing and easing. The new library (which doesn’t yet have a name) aims to be really lightweight (which really doesn’t matter much), while being more developer friendly.

For example, I can select all elements with the class “test” using .cls(“test”), and make them purple by doing .cls(“test”).css(“color”,”purple”) similar to jQuery. I can do .id(“yay”).load(“lib.js”) to load something using ajax. Creating elements is pretty easy too, say I want to load a random script, I can do .create(“script”).attr(“src”,”url”).appendTo(.tag(“body”)) and I can add events to something using .tag(“button”).index(0).on(“click”,function(e){alert(“yay”)}).

Here’s a nice little demo of what it can do http://jsbin.com/owuge/31

I intended to post this back in March 7th, but I was working on a rewrite of the library, which would be a tiny bit larger but implement CSS-selectors and be easier to maintain.

vX is the world’s smallest Javascript library. It’s modular, powerful, unlikely to interfere with operations of other libraries, open source (MIT license), and cross-browser. It’s designed with size first and foremost and everything else secondary. The cross-browser GET/POST AJAX function with callbacks is only 200 bytes. The closest thing is over twice the size. This extreme density is present in every function of the library.

Currently, the whole framework, including Ajax, Events, URL Encoding, Animation (including Fading), Namespacing, JSON Serialization, JSON Parsing, Document onReady, HTML entities encode/decode, Array Index, Get Elements By Class Name, Object Extending, Templating, Queueing, Class Manipulation and more. is under 3KB total uncompressed.

All functions are aliased to full reader-friendly names as well as very consise abbreviations. For example, Ajax can be accessed by.ajax or .X.

So i had this little project involving a quote repository and due to some trouble installing the superior Chirpy system, I used RQMS and did a few changes to add features like ajax ranking so you don’t have to reload to rank something.

It only involved changing less than 10 lines and pasting a snippet of my vX Ajax library.

Replace lines 151, 152 and 153 with the following lines (respectively) in rash_output.php (the template).

<a href="?ratingplus<?=$GET_SEPARATOR_HTML?>id=<?=$row['id']?>" onclick="plus(<?=$row['id']?>);return false" class="quote_ratingplus">+</a>
(<span id="rating<?=$row['id']?>"><?=$row['rating']?></span>)
<a href="?ratingminus<?=$GET_SEPARATOR_HTML?>id=<?=$row['id']?>" onclick="minus(<?=$row['id']?>);return false" class="quote_ratingminus">-</a>

Then add the following somewhere arbitrary in the of rash_template.php

<script type="text/javascript">
var _=_?_:{}
_.ajax=_.X=function(u,f,d,x){x=window.ActiveXObject;x=new(x?x:XMLHttpRequest)('Microsoft.XMLHTTP');x.open(d?'POST':'GET',u,1);x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.onreadystatechange=function(){x.readyState>3&amp;&amp;f?f(x.responseText,x):0};x.send(d)}
_.id=_.G=function(e){return e.style?e:_.d.getElementById(e)}
_.d=document

function plus(ID){
    _.ajax("?ratingplus&amp;id="+ID, function(){
        _.G("rating"+ID).innerHTML = parseInt(_.G("rating"+ID).innerHTML)+1
    })
}
function minus(ID){
    _.ajax("?ratingminus&amp;id="+ID, function(){
        _.G("rating"+ID).innerHTML = parseInt(_.G("rating"+ID).innerHTML)-1
    })
}
</script>

I’ve packaged a sample rash template with the ajax functionality. You can get it here: http://drop.io/ajaxrash

And the purpose of this is of course for one of my new projects, BotBash a conversation repository between a little (really simple) bot i built and strangers on Omegle. You can see it in action on http://botbash.antimatter15.com

Okay, so 0 = false, so it makes sense that !0 = true. but also 1 = true, so that saved 1 byte.

Since there’s no .readyState attribute > 4, instead of .readyState == 4, you can do .readyState>3

the big one was ActiveX, which was originally

x=new(this.ActiveXObject?ActiveXObject:XMLHttpRequest)('Microsoft.XMLHTTP')

I noticed how this.activeXObject was repeated unnecessarily. So i added a new variable y

y=this.ActiveXObject

then I did:

y=this.ActiveXObject;x=new(y?y:XMLHttpRequest)('Microsoft.XMLHTTP')

thanks to dynamic languages, I could use x, and just reset it to something else (saving a variable declaration!)

x=this.ActiveXObject;x=new(x?x:XMLHttpRequest)('Microsoft.XMLHTTP')

Now I just need to find a way to shrink

x.setRequestHeader('Content-type','application/x-www-form-urlencoded')

Um… I got vX Ajax 1 byte smaller.

*I think you can’t get any smaller than this… For real…

The original vX function was 337b. Now, it’s been reduced down to 293 bytes, while adding a new feature (callback is now optional).

Apparently, the above stuff doesn’t work (Wordpress?)

It’s really quite amazing. The big things that reduced size were using lots of condititional things, really obfuscated unreadable stuff, and using !0 instead of true, and !1 instead of false.

If you want to use it, try building your own copy from.

http://vxjs.googlecode.com/svn/trunk/build.htm

The usage has signifigantly changed though, there, everything’s namespaced under an underscore, so it’s _.X(“url”)

Built on top of the vX Ajax Function, is the vX JS Library. It’s probably the world’s smallest JS Library, in total, about 1.45kb, with things like Animations, Ajax, JSON Serialization, URL Encoding, Cloning, Event Handling, Fade Effects, and more. It’s signifigantly less elegant than jQuery and others, but it is extremely lightweight and quite cross-platform. The code has been optimized down to each individual byte.

http://code.google.com/p/vxjs/

It’s not too useful. It may be useful for some tiny things, but it’s not really that useful.

It’s not good enough to make things really high-quality, or complex such as the Ajax Animator. It’s good only if your making like something small, where you might want some ajax, but still want it to load fast.

Also, another thing, not exactly part of the library is vXg, a Get-Only version of vX that’s only 221 bytes. http://vxjs.googlecode.com/svn-history/r26/trunk/ajaxget.js

vXg(URL, CALLBACK)

For one of my projects, I needed a really simple, lightweight one. It’s super lightweight. I mean really. really lightweight. Only 337 bytes (though 1 kilobyte of random crap in front of it would make it 1337 bytes). Most libraries are over 60kb! If you’re using it only for ajax. You’re using 180 TIMES what you really need.

This one can do GET/POST requests with a callback

/*vX Ajax Function. (C) Antimatter15 2008*/
function vX(u,f,p){var x=(window.ActiveXObject)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
x.open(p?"POST":"GET",u,true);if(p) x.setRequestHeader("Content-type","application/x-www-form-urlencoded");
x.onreadystatechange=function(){if(x.readyState==4&&x.status==200) f(x.responseText)};x.send(p)}

It takes 3 parameters. the URL, the Callback function, and the post parameters (optional).

vX(AJAX URL, CALLBACK FUNCTION[, POST PARAMETERS]);

Note that here the callback is required, not optional, though it could probably be made to do that by changing f?f(x.responseText):x.

To Use:

GET:

vX("ajax.php?you=suck&howmuch=alot", function(responsetext){alert(responsetext)})

POST:

vX("ajax.php", function(responsetext){alert(responsetext)}, "you=suck&howmuch=alot")

That’s it. In case your wondering what the name is, I wanted somethign that was short so it was lightweight. I didnt want it to be single letter because single-letter names are likely to collide with other libraries. Also because “V” and “X” are two widely overused characters anyway. Another reason might be that you dont know what version it is :P